/**
 * Copyright 2017-present, Karakal.
 * All rights reserved.
 * 
 * 2018/05/10 by xiongisxiong
 * 小部件：左图标右文字说明，右底部borderBottom
 */
import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'

import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import Icon2 from 'react-native-vector-icons/Ionicons'

import { screen, color } from '../utils'
import { H3, H4, Tip } from './TextTool'

export default class MenuRow extends PureComponent{
  render() {
    const { leftIconName, ionIcon, title, subTitle, rightIcon, border=true,rightTip, image, video, rightIconName, leftText } = this.props;
    const borderStyle = border ? {borderBottomWidth: screen.onePixel,borderColor: color.border} : {}
    return (
      <View style={{height: screen.width * 0.137, paddingLeft: 8, flexDirection: 'row', alignItems: 'center'}}>
        <View style={{width: video ? 90 : 45, justifyContent: 'center', alignItems: 'center', marginRight: image ? 10 : 0}}>
          {leftText && <H3>{leftText}</H3>}
          {leftIconName && <Icon name = {leftIconName} size = {25} />}
          {ionIcon && <Icon2 name = {ionIcon} size = {25} />}
          {image && <Image source={image} style={{width: '100%', height: '90%', marginLeft: 10}} />}
          {video && <Image source={video} style={{width: '100%',height:'90%', marginLeft: 10}} />}
        </View>

        <View style={[{flex: 1, height: '100%', flexDirection: 'row'}, borderStyle]}>
          <View style={{justifyContent: 'center', flex: 1}}>
            <H4 numberOfLines={1}>{title}</H4>
            {subTitle && <Tip numberOfLines={1} style={{marginTop: 5}}>{subTitle}</Tip>}
          </View>
          <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingRight: 8}}>
            {rightTip && <Tip numberOfLines={1}>{rightTip}</Tip>}
            {rightIcon && <Icon name='chevron-right' size={20} />}
            {!!rightIconName && <Icon2 name={rightIconName} size={20} />}
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
      justifyContent: 'center',
      alignItems: 'center',
      width: screen.width / 4,
      height: screen.width / 4,
  },
  iconContainer: {
      height: '50%',
      width: '50%',
      borderRadius: 50,
      borderWidth: 2,
      borderColor: color.theme,
      justifyContent: 'center',
      alignItems: 'center'
  },
  text: {
      marginTop: 5,
      fontSize: 11,
      color: color.black
  }
});